<template>
  <div class="student-table-container">
    <el-table
      v-loading="loading"
      :data="students"
      border
      stripe
      style="width: 100%"
      @row-click="handleRowClick"
    >
      <el-table-column prop="id" label="ID" width="80" resizable></el-table-column>
      <el-table-column prop="studentId" label="学号" min-width="120" resizable></el-table-column>
      <el-table-column prop="name" label="姓名" min-width="100" resizable></el-table-column>
      <el-table-column label="队次" min-width="120" resizable>
        <template #default="scope">
          <span v-if="scope.row.className">{{ scope.row.className }}</span>
          <span v-else class="text-muted">--</span>
        </template>
      </el-table-column>
      <el-table-column label="专业" min-width="120" resizable>
        <template #default="scope">
          <span v-if="scope.row.majorName">{{ scope.row.majorName }}</span>
          <span v-else class="text-muted">--</span>
        </template>
      </el-table-column>
      <el-table-column label="培养层次" min-width="120" resizable>
        <template #default="scope">
          <span v-if="scope.row.cengCiName">{{ scope.row.cengCiName }}</span>
          <span v-else class="text-muted">--</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" resizable>
        <template #default="scope">
          <el-tag v-if="scope.row.statusName" :type="getStatusTagType(scope.row.statusName) || 'info'">
            {{ scope.row.statusName }}
          </el-tag>
          <span v-else class="text-muted">--</span>
        </template>
      </el-table-column>
      <el-table-column label="是否留级" width="100" resizable>
        <template #default="scope">
          <el-tag v-if="scope.row.isRepeater !== undefined" :type="scope.row.isRepeater ? 'warning' : 'info'">
            {{ scope.row.isRepeater ? '是' : '否' }}
          </el-tag>
          <span v-else class="text-muted">--</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="280" resizable>
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">
            <el-icon><Edit /></el-icon> 编辑
          </el-button>
          <el-button size="small" type="warning" @click="handleStatusChange(scope.row)">
            <el-icon><Switch /></el-icon> 状态
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            <el-icon><Delete /></el-icon> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import { Edit, Switch, Delete } from '@element-plus/icons-vue'

export default {
  name: 'StudentDataTable',
  components: {
    Edit, Switch, Delete
  },
  props: {
    students: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  emits: ['edit', 'status-change', 'delete', 'row-click', 'page-change'],
  setup(props, { emit }) {
    // 根据状态获取标签类型
    const getStatusTagType = (statusName) => {
      if (!statusName) return ''
      
      const statusMap = {
        '在读': 'success',
        '毕业': 'info',
        '休学': 'warning',
        '退学': 'danger'
      }
      
      return statusMap[statusName] || 'info'
    }

    const handleEdit = (row) => {
      emit('edit', row)
    }

    const handleStatusChange = (row) => {
      emit('status-change', row)
    }

    const handleDelete = (row) => {
      emit('delete', row)
    }

    const handleRowClick = (row) => {
      emit('row-click', row)
    }

    const handlePageChange = (page) => {
      emit('page-change', page)
    }

    return {
      getStatusTagType,
      handleEdit,
      handleStatusChange,
      handleDelete,
      handleRowClick,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.student-table-container {
  width: 100%;
}

.text-muted {
  color: #909399;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>